import ReactDOM from 'react-dom/client'
// !#1定义
// 首字母大写
function Hello() {
  // 必须要有 return
  // return 什么表示渲染什么，这儿返回的就是一段 JSX
  console.log(this) // undefined，原因：代码经过 Babel 编译后，会开启严格模式，内部是这样调用 Hello()
  return <h1>Hello React</h1>
}

// !#2 使用
// 单标签闭合或双标签
// <Hello/> 是当做组件去使用的

// 了解：render(<Hello/>) 渲染组件的过程
// render 函数解析标签，发现咦，首字母是大写开头的，所以内部会当做组件进行解析
// 又发现是一个函数组件，所以内部会直接调用这个函数 Hello()
// 调用完毕得到一段 JSX，由 Babel 转成 React.createElement() 这种形式
// React.createElement() 调用完毕之后的结果是虚拟 DOM
// render 负责把虚拟 DOM 转成真实 DOM 并渲染
ReactDOM.createRoot(document.querySelector('#root')).render(<Hello />)

// 当做普通函数去使用的
// ReactDOM.createRoot(document.querySelector('#root')).render(Hello())
